﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>xBim浏览器5</title>
    <!--<script src="/Scripts/gl-matrix.js"></script>
    <script src="/Scripts/webgl-utils.js"></script>-->
    <link href="/Scripts/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="/Scripts/bootstrap/bootstrap-theme.min.css" rel="stylesheet" />
    <!--<link href="/Scripts/bootstrap-select/bootstrap-select.min.css" rel="stylesheet" />-->
    <link href="/Scripts/bootstrap-treeview/dist/bootstrap-treeview.min.css" rel="stylesheet" />
    <link href="/Scripts/layui/css/layui.css" rel="stylesheet" />
    <script src="/Scripts/xbim/xbim-viewer.debug.bundle.js"></script>
    <script src="/Scripts/xbim/xbim-navigation-cube.js"></script>
    <script src="/Scripts/xbim/xbim-navigation-home.js"></script>
    <script src="/Scripts/jquery/jquery-2.2.3.min.js"></script>
    <script src="/Scripts/bootstrap/bootstrap.min.js"></script>
    <script src="../Scripts/bootstrap/bootstrap-hover-dropdown.min.js"></script>
    <script src="/Scripts/bootstrap-treeview/dist/bootstrap-treeview.min.js"></script>
    <!--<script src="/Scripts/bootstrap-select/bootstrap-select.min.js"></script>-->
    <script src="/Scripts/layui/layui.all.js"></script>
    <script src="/Scripts/Util/treeHelper.js"></script>

    <style>

        html, body {
            height: 100%;
            padding: 0;
            margin: 0;
        }

        canvas {
            display: block;
            border: none;
            margin-left: auto;
            margin-right: auto;
        }

        #bimProjectInfo {
            position: absolute;
            left: 0;
            top: 52px;
            display: inline-block;
            width: 280px;
            border: 1px solid gray;
            /*opacity: 0.5;*/
            background-color: white;
        }

        #bimProperties {
            position: absolute;
            right: 0;
            top: 52px;
            display: inline-block;
            /*width: 250px;*/
            width: 280px;
            border: 1px solid gray;
            /*opacity: 0.5;*/
            background-color: white;
        }

        #bimStatus {
            position: absolute;
            right: 0;
            bottom: 0;
            /*display: block;*/
            width: 100%;
            border: 1px solid gray;
            /*opacity: 0.5;*/
            background-color: white;
        }
    </style>

</head>

<body>

    <div class="container">
    </div>
    <!-- 顶部 操作 -->
    <nav class="navbar navbar-default" style="margin-bottom:0;">
        <div class="container-fluid">
            <!-- 品牌Logo、最小化时菜单 -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">
                    <img alt="xBIM" src="/Scripts/Img/logo/xbim_white_h35.png" style="margin-top:-10px;background-color:cornflowerblue;" />
                </a>
            </div>
            <!-- 操作按钮 -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <!-- 左对齐 -->
                <ul class="nav navbar-nav">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">相机视角 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li> <a onclick="viewer.camera = 'perspective';"> 透视 </a> </li>
                            <li> <a onclick="viewer.camera = 'orthogonal';"> 正交 </a> </li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">样式 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li> <a onclick="setAllTypeStyle(1)"> 透明化 </a> </li>
                            <li> <a onclick="setAllTypeStyle(2)"> 白化 </a> </li>
                            <li> <a onclick="setAllTypeState(xState.UNSTYLED)"> 恢复默认 </a> </li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">渲染模式 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li> <label> <input type="radio" name="radioRenderingMode" value="normal" checked="checked" onchange="viewer.renderingMode = 'normal';" /> 普通 </label> </li>
                            <li> <label> <input type="radio" name="radioRenderingMode" value="xray" onchange="viewer.renderingMode = 'x-ray';" /> X射线 </label>  </li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">单击模式 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li> <label> <input type="radio" name="pickMode" value="select" checked="checked" /> 选择 </label> </li>
                            <li> <label> <input type="radio" name="pickMode" value="hideOne" /> 隐藏元素 </label>  </li>
                            <li> <label> <input type="radio" name="pickMode" value="hideType" /> 隐藏类型 </label> </li>
                            <li> <label> <input type="radio" name="pickMode" value="highlightOne" /> 高亮元素 </label> </li>
                            <li> <label> <input type="radio" name="pickMode" value="highlightType" /> 高亮类型 </label> </li>
                            <li> <a onclick="setAllTypeState(xState.UNDEFINED)"> 恢复默认 </a> </li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">剖切 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li> <a onclick="viewer.clip();"> 剖切 </a> </li>
                            <li> <a onclick="viewer.unclip();"> 取消剖切 </a> </li>
                        </ul>
                    </li>
                    <li style="display:none;"> <a onclick="setAllTypeState(xState.UNSTYLED)"> 生成计划 </a> </li>

                </ul>
                <form class="navbar-form navbar-left" style="display:none;">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                    <div class="btn-group" role="group" aria-label="...">
                        <button type="button" class="btn btn-default" onclick="">编辑模式</button>
                        <button type="button" class="btn btn-default" onclick="">查看</button>
                        <button type="button" class="btn btn-default" onclick="">Right</button>
                    </div>
                </form>

                <!-- 右对齐 -->
                <ul class="nav navbar-nav navbar-right">
                    <li> <a onclick="localData.editMode = !localData.editMode; localData.editMode ? $(this).text('编辑模式') : $(this).text('浏览模式');">浏览模式</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    <!-- 中间 画布 -->
    <div id="bimContainer">
        <canvas id="xBIM-viewer" width-="800" height-="600" style="width:100%;height:100%;"></canvas>
    </div>
    <!--左侧 导航-->
    <div id="bimProjectInfo">
        <!--索引-->
        <ul id="myTab" class="nav nav-tabs">
            <li class="active">
                <a href="#shared_Bldg" data-toggle="tab">  楼层 </a>
            </li>
            <li class="">
                <a href="#gce_MonitorDevice" data-toggle="tab"> 监控设备 </a>
            </li>
            <li class="dropdown" style="display:none;">
                <a href="#" id="tabDomain" class="dropdown-toggle"
                   data-toggle="dropdown">
                    领域
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu" role="menu" aria-labelledby="tabDomain">
                    <li><a href="#domain_BuildControl" tabindex="-1" data-toggle="tab">建筑控制</a></li>
                    <li><a href="#domain_FireProtect" tabindex="-1" data-toggle="tab">消防管理</a></li>
                    <li><a href="#domain_StructureElem" tabindex="-1" data-toggle="tab">结构构件</a></li>
                    <li><a href="#domain_StructureAnaly" tabindex="-1" data-toggle="tab">结构分析</a></li>
                    <li><a href="#domain_HVAC" tabindex="-1" data-toggle="tab">暖通工程</a></li>
                    <li><a href="#domain_Electrical" tabindex="-1" data-toggle="tab">电气</a></li>
                    <li><a href="#domain_Architecture" tabindex="-1" data-toggle="tab">建筑</a></li>
                    <li><a href="#domain_ConsManager" tabindex="-1" data-toggle="tab">施工管理</a></li>
                </ul>
            </li>
            <li class="" style="display:none;">
                <a href="#setting_all" data-toggle="tab">  设置 </a>
            </li>
        </ul>
        <!-- 内容 -->
        <div id="myTabContent" class="tab-content" style="max-height-:500px;height:90%;overflow-y:scroll;overflow-x:scroll;">
            <div class="tab-pane fade in active" id="shared_Bldg">
                <!--楼层-->
                <div id="trShardBldg"> </div>
            </div>
            <div class="tab-pane fade in" id="gce_MonitorDevice">
                <!--监控设备-->
                <div id="trGceMonitorDevice"> </div>
            </div>

            <div class="tab-pane fade" id="domain_BuildControl">
                <!--建筑控制-->
                <div id="trdomain_BuildControl"></div>
            </div>
            <div class="tab-pane fade" id="domain_FireProtect">
                <!--消防领域-->
                <div id="trdomain_FireProtect"></div>
            </div>
            <div class="tab-pane fade" id="domain_StructureElem">
                <!--结构构件-->
                <div id="trdomain_StructureElem"></div>
            </div>
            <div class="tab-pane fade" id="domain_StructureAnaly">
                <!--结构分析-->
                <div id="trdomain_StructureAnaly"></div>
            </div>
            <div class="tab-pane fade" id="domain_HVAC">
                <!--暖通工程-->
                <div id="trdomain_HVAC"></div>
            </div>
            <div class="tab-pane fade" id="domain_Electrical">
                <!--电气-->
                <div id="trdomain_Electrical"></div>
            </div>
            <div class="tab-pane fade" id="domain_Architecture">
                <!--建筑-->
                <div id="trdomain_Architecture"></div>
            </div>
            <div class="tab-pane fade" id="domain_ConsManager">
                <!--施工管理-->
                <div id="trdomain_ConsManager"></div>
            </div>
            <div class="tab-pane fade" id="setting_all">
                <!-- 设置 -->
                <div id="divSetting_all"></div>

            </div>
        </div>
    </div>
    <!--右侧 属性-->
    <div id="bimProperties">
        <!-- 属性 -->
        <div class="panel-group" id="accordion1" role="tablist" aria-multiselectable="true">
            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="heading1">
                    <h4 class="panel-title">
                        <a role="button" data-toggle="collapse" data-parent="#accordion1" href="#collapse1" aria-expanded="true" aria-controls="collapse1">
                            属性
                        </a>
                    </h4>
                </div>
                <div id="collapse1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading1">
                    <div class="panel-body" style="max-height:500px;min-height:200px; overflow-y:scroll;overflow-x:scroll;">

                    </div>
                </div>
            </div>
        </div>

    </div>
    <!--底部 状态-->
    <div id="bimStatus">
        当前ID: <span id="coords"></span>
        帧速率: <span id="fps"></span>
    </div>

    <!-- 设备绑定 -->
    <div id="divBindDevice" style="display:none">
        <div class="container" style="width:100%;">
            <div class="row">
                <div class="col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1 ">
                    <form class="form-horizontal-" id="formBindDevice">
                        <input type="text" name="IfcId" hidden />
                        <div class="form-group">
                            <label for="selDeviceType">设备类型</label>
                            <select class="form-control" id="selDeviceType" name="DeviceType" onchange="funDeviceTypeChanged()"> </select>
                        </div>
                        <div class="form-group">
                            <label for="selDevice">设备</label>
                            <select class="form-control" id="selDevice" name="DeviceID"> </select>
                        </div>
                        <button  type="button" class="btn btn-default" onclick="saveBindDeviceWin()">保存</button>
                    </form>
                </div>
            </div>
        </div>
    </div>


    <!-- 基础脚本 -->
    <script type="text/javascript">
        var QueryString = function () {
            // This function is anonymous, is executed immediately and
            // the return value is assigned to QueryString!
            var queryString = {};
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                // If first entry with this name
                if (typeof queryString[pair[0]] === "undefined") {
                    queryString[pair[0]] = pair[1];
                    // If second entry with this name
                } else if (typeof queryString[pair[0]] === "string") {
                    var arr = [queryString[pair[0]], pair[1]];
                    queryString[pair[0]] = arr;
                    // If third or later entry with this name
                } else {
                    queryString[pair[0]].push(pair[1]);
                }
            }
            return queryString;
        }();
        //************************************************** $tg$select **************************************************//
        var $tg$select = {
            // 设置可选项   $tg$select.setOptions("#formMain select[name=F_Select003]", [{ value: '111', text: 't1111' }]);
            setOptions: function (selector, options, withEmpty) {
                var $select = $(selector);
                if (!selector || $select.length == 0)
                { return ''; }
                if (!options || !Array.isArray(options))
                { return ''; }

                var html = "";
                if (withEmpty && withEmpty == true) {
                    html = html + '<option value="' + '' + '">' + '--请选择--' + '</option>';
                }
                options.forEach(function (item, index) {
                    html = html + '<option value="' + item.value + '">' + item.text + '</option>';
                })
                $select.html(html);
                // $select.selectpicker('render');
            },
            //  $tg$select.setValue("#formMain select[name=F_Select003]", '112');
            setValue: function (selector, value) {
                var $select = $(selector);
                if (!selector || $select.length == 0)
                { return ''; }
                $select.val(value);
               // $select.selectpicker('val', value);
            },
            //  $tg$select.getValue("#formMain select[name=F_Select003]");
            getValue: function (selector) {
                var $select = $(selector);
                if (!selector || $select.length == 0)
                { return ''; }
                // return $select.selectpicker('val');
                return $select.val();
            },
            getText: function (selector) {
            var $select = $(selector);
            if (!selector || $select.length == 0)
            { return ''; }
                //return $select.selectpicker('');
            return $select.find("option:selected").text();
        }
            //


        };

        String.prototype.format = function () {
            var args = arguments;
            return this.replace(/\{(\d+)\}/g,
                function (m, i) {
                    return args[i];
                });
        };

    </script>
    <!-- 数据 -->
    <script>
        //  http://localhost:61560/xBimViewer/index.html?pid=10012&origin=http://gceai.cn:40089
        //  JSON.stringify(localData.CurPrjBimInfo.lsIfcDevice)
        var localData = {};
        localData.editMode = false;
        localData.deviteTypeInfo = [{ value: "TEM_Device", text: "环境监测", }, { value: "TRN_AttenDevice", text: "实名制", }, { value: "TTC_TowerCrane", text: "塔机监控", }, { value: "TVM_MonitorDevice", text: "视频监控", }, ];
        localData.PrjBimInfo = {
            10012: {
                ifc: '/xBimViewer/smallHighBussiness.ifc', wexbim: '/xBimViewer/smallHighBussiness.wexbim'
                , lsDeviceInfo: [{ "F_ConsProjectID": "10012", "F_ID": "10008", "F_Name": "扬尘设备1", "F_DeviceID": "10008", "F_DeviceName": "扬尘设备1", "F_DeviceStatus": 1, "F_DeviceType": "TEM_Device" }, { "F_ConsProjectID": "10012", "F_ID": "10009", "F_Name": "扬尘设备2", "F_DeviceID": "10009", "F_DeviceName": "扬尘设备2", "F_DeviceStatus": 1, "F_DeviceType": "TEM_Device" }, { "F_ConsProjectID": "10012", "F_ID": "10010", "F_Name": "扬尘设备3", "F_DeviceID": "10010", "F_DeviceName": "扬尘设备3", "F_DeviceStatus": 1, "F_DeviceType": "TEM_Device" }, { "F_ConsProjectID": "10012", "F_ID": "10011", "F_Name": "扬尘设备4", "F_DeviceID": "10011", "F_DeviceName": "扬尘设备4", "F_DeviceStatus": 1, "F_DeviceType": "TEM_Device" }, { "F_ConsProjectID": "10012", "F_ID": "10012", "F_Name": "扬尘设备5", "F_DeviceID": "10012", "F_DeviceName": "扬尘设备5", "F_DeviceStatus": 1, "F_DeviceType": "TEM_Device" }, { "F_ConsProjectID": "10012", "F_ID": "10013", "F_Name": "扬尘设备6", "F_DeviceID": "10013", "F_DeviceName": "扬尘设备6", "F_DeviceStatus": 1, "F_DeviceType": "TEM_Device" }, { "F_ConsProjectID": "10012", "F_ID": "10014", "F_Name": "扬尘设备7", "F_DeviceID": "10014", "F_DeviceName": "扬尘设备7", "F_DeviceStatus": 1, "F_DeviceType": "TEM_Device" }, { "F_ConsProjectID": "10012", "F_ID": "1010", "F_Name": "人脸设备169-进", "F_DeviceID": "1010", "F_DeviceName": "人脸设备169-进", "F_DeviceStatus": 0, "F_DeviceType": "TRN_AttenDevice" }, { "F_ConsProjectID": "10012", "F_ID": "1001", "F_Name": "人脸设备167-出", "F_DeviceID": "1001", "F_DeviceName": "人脸设备167-出", "F_DeviceStatus": 0, "F_DeviceType": "TRN_AttenDevice" }, { "F_ConsProjectID": "10012", "F_ID": "10001", "F_Name": "三水大华检测", "F_DeviceID": "10001", "F_DeviceName": "三水大华检测", "F_DeviceStatus": 1, "F_DeviceType": "TVM_MonitorDevice" }, { "F_ConsProjectID": "10012", "F_ID": "10008", "F_Name": "塔吊监测", "F_DeviceID": "10008", "F_DeviceName": "塔吊监测", "F_DeviceStatus": 1, "F_GPSLongi": 113.0935, "F_GPSLati": 23.0427, "F_DeviceType": "TVM_MonitorDevice" }, { "F_ConsProjectID": "10012", "F_ID": "10012", "F_Name": "海康综管-崇南平面", "F_DeviceID": "10012", "F_DeviceName": "海康综管-崇南平面", "F_DeviceStatus": 1, "F_DeviceType": "TVM_MonitorDevice" }, { "F_ConsProjectID": "10012", "F_ID": "10011", "F_Name": "海康综管-崇南门口", "F_DeviceID": "10011", "F_DeviceName": "海康综管-崇南门口", "F_DeviceStatus": 1, "F_DeviceType": "TVM_MonitorDevice" }, { "F_ConsProjectID": "10012", "F_ID": "10009", "F_Name": "平面1#", "F_DeviceID": "10009", "F_DeviceName": "平面1#", "F_DeviceStatus": 1, "F_DeviceType": "TVM_MonitorDevice" }, { "F_ConsProjectID": "10012", "F_ID": "1005", "F_Name": "塔机001#", "F_DeviceID": "1005", "F_DeviceName": "塔机001#", "F_DeviceStatus": 1, "F_DeviceType": "TTC_TowerCrane" }, { "F_ConsProjectID": "10012", "F_ID": "1006", "F_Name": "塔机002#", "F_DeviceID": "1006", "F_DeviceName": "塔机002#", "F_DeviceStatus": 1, "F_DeviceType": "TTC_TowerCrane" }, { "F_ConsProjectID": "10012", "F_ID": "1007", "F_Name": "塔机003#", "F_DeviceID": "1007", "F_DeviceName": "塔机003#", "F_DeviceStatus": 1, "F_DeviceType": "TTC_TowerCrane" }]
                , lsIfcDevice: [{ "IfcId": "232234", "DeviceType": "TVM_MonitorDevice", "DeviceID": "10001", "DeviceName": "三水大华检测" }, { "IfcId": "229397", "DeviceType": "TVM_MonitorDevice", "DeviceID": "10012", "DeviceName": "海康综管-崇南平面" }, { "IfcId": "325966", "DeviceType": "TRN_AttenDevice", "DeviceID": "1010", "DeviceName": "人脸设备169-进" }, { "IfcId": "232136", "DeviceType": "TRN_AttenDevice", "DeviceID": "1001", "DeviceName": "人脸设备167-出" }, { "IfcId": "2085519", "DeviceType": "TEM_Device", "DeviceID": "10008", "DeviceName": "扬尘设备1" }, { "IfcId": "2056183", "DeviceType": "TTC_TowerCrane", "DeviceID": "1005", "DeviceName": "塔机001#" }]

                },
            10014: {
                ifc: '/xBimViewer/smallHighBussiness2.ifc', wexbim: '/xBimViewer/smallHighBussiness2.wexbim'
                , lsDeviceInfo: [{ "F_ConsProjectID": "10012", "F_ID": "10008", "F_Name": "扬尘设备1", "F_DeviceID": "10008", "F_DeviceName": "扬尘设备1", "F_DeviceStatus": 1, "F_DeviceType": "TEM_Device" }, { "F_ConsProjectID": "10012", "F_ID": "10009", "F_Name": "扬尘设备2", "F_DeviceID": "10009", "F_DeviceName": "扬尘设备2", "F_DeviceStatus": 1, "F_DeviceType": "TEM_Device" }, { "F_ConsProjectID": "10012", "F_ID": "10010", "F_Name": "扬尘设备3", "F_DeviceID": "10010", "F_DeviceName": "扬尘设备3", "F_DeviceStatus": 1, "F_DeviceType": "TEM_Device" }, { "F_ConsProjectID": "10012", "F_ID": "10011", "F_Name": "扬尘设备4", "F_DeviceID": "10011", "F_DeviceName": "扬尘设备4", "F_DeviceStatus": 1, "F_DeviceType": "TEM_Device" }, { "F_ConsProjectID": "10012", "F_ID": "10012", "F_Name": "扬尘设备5", "F_DeviceID": "10012", "F_DeviceName": "扬尘设备5", "F_DeviceStatus": 1, "F_DeviceType": "TEM_Device" }, { "F_ConsProjectID": "10012", "F_ID": "10013", "F_Name": "扬尘设备6", "F_DeviceID": "10013", "F_DeviceName": "扬尘设备6", "F_DeviceStatus": 1, "F_DeviceType": "TEM_Device" }, { "F_ConsProjectID": "10012", "F_ID": "10014", "F_Name": "扬尘设备7", "F_DeviceID": "10014", "F_DeviceName": "扬尘设备7", "F_DeviceStatus": 1, "F_DeviceType": "TEM_Device" }, { "F_ConsProjectID": "10012", "F_ID": "1010", "F_Name": "人脸设备169-进", "F_DeviceID": "1010", "F_DeviceName": "人脸设备169-进", "F_DeviceStatus": 0, "F_DeviceType": "TRN_AttenDevice" }, { "F_ConsProjectID": "10012", "F_ID": "1001", "F_Name": "人脸设备167-出", "F_DeviceID": "1001", "F_DeviceName": "人脸设备167-出", "F_DeviceStatus": 0, "F_DeviceType": "TRN_AttenDevice" }, { "F_ConsProjectID": "10012", "F_ID": "10001", "F_Name": "三水大华检测", "F_DeviceID": "10001", "F_DeviceName": "三水大华检测", "F_DeviceStatus": 1, "F_DeviceType": "TVM_MonitorDevice" }, { "F_ConsProjectID": "10012", "F_ID": "10008", "F_Name": "塔吊监测", "F_DeviceID": "10008", "F_DeviceName": "塔吊监测", "F_DeviceStatus": 1, "F_GPSLongi": 113.0935, "F_GPSLati": 23.0427, "F_DeviceType": "TVM_MonitorDevice" }, { "F_ConsProjectID": "10012", "F_ID": "10012", "F_Name": "海康综管-崇南平面", "F_DeviceID": "10012", "F_DeviceName": "海康综管-崇南平面", "F_DeviceStatus": 1, "F_DeviceType": "TVM_MonitorDevice" }, { "F_ConsProjectID": "10012", "F_ID": "10011", "F_Name": "海康综管-崇南门口", "F_DeviceID": "10011", "F_DeviceName": "海康综管-崇南门口", "F_DeviceStatus": 1, "F_DeviceType": "TVM_MonitorDevice" }, { "F_ConsProjectID": "10012", "F_ID": "10009", "F_Name": "平面1#", "F_DeviceID": "10009", "F_DeviceName": "平面1#", "F_DeviceStatus": 1, "F_DeviceType": "TVM_MonitorDevice" }, { "F_ConsProjectID": "10012", "F_ID": "1005", "F_Name": "塔机001#", "F_DeviceID": "1005", "F_DeviceName": "塔机001#", "F_DeviceStatus": 1, "F_DeviceType": "TTC_TowerCrane" }, { "F_ConsProjectID": "10012", "F_ID": "1006", "F_Name": "塔机002#", "F_DeviceID": "1006", "F_DeviceName": "塔机002#", "F_DeviceStatus": 1, "F_DeviceType": "TTC_TowerCrane" }, { "F_ConsProjectID": "10012", "F_ID": "1007", "F_Name": "塔机003#", "F_DeviceID": "1007", "F_DeviceName": "塔机003#", "F_DeviceStatus": 1, "F_DeviceType": "TTC_TowerCrane" }]
                , lsIfcDevice: [{ "IfcId": "200848", "DeviceType": "TEM_Device", "DeviceID": "10011", "DeviceName": "扬尘设备4" }, { "IfcId": "201019", "DeviceType": "TEM_Device", "DeviceID": "10008" }, { "IfcId": "98768", "DeviceType": "TEM_Device", "DeviceID": "10008", "DeviceName": "扬尘设备1" }, { "IfcId": "77346", "DeviceType": "TRN_AttenDevice", "DeviceID": "1001", "DeviceName": "人脸设备167-出" }]

            },
        };
        localData.CurPrjId = QueryString.pid || 10012; // 当前工程ID
        localData.CurPrjBimInfo = localData.PrjBimInfo[localData.CurPrjId];// 当前工程/BIM信息
        localData.Origin = QueryString.origin || window.location.origin;

        function getDeviceOptions(deviceType) {
            var options = [];
            localData.CurPrjBimInfo.lsDeviceInfo.forEach(function (item) {
                if (item.F_DeviceType == deviceType) {
                    options.push({ value: item.F_DeviceID, text:item.F_DeviceName, });
                }
            });
            return options;
        }
        function getDeviceByIfcId(ifcId) {
            var deviceInfo = null;
            localData.CurPrjBimInfo.lsIfcDevice.forEach(function (device) {
                if (device.IfcId && device.IfcId == ifcId) {
                    deviceInfo = device;
                    return true;
                }
            })
            return deviceInfo;
        }
        function setDeviceIfcId(ifcId, deviceType, deviceId, deviceName) {
            var ifcdeviceInfo = null;
            localData.CurPrjBimInfo.lsIfcDevice.forEach(function (device) {
                if (device.IfcId && device.IfcId == ifcId+"") {
                    ifcdeviceInfo = device;
                    return true;
                }
            })
            if (ifcdeviceInfo == null) {
                localData.CurPrjBimInfo.lsIfcDevice.push({ IfcId: ifcId, DeviceType: deviceType, DeviceID: deviceId, DeviceName: deviceName });
            } else {
                ifcdeviceInfo.DeviceType = deviceType;
                ifcdeviceInfo.DeviceID = deviceId;
                ifcdeviceInfo.DeviceName = deviceName;
            }
        }
    </script>
    <!--  XBim Viewer 业务脚本 -->
    <script type="text/javascript">


        // 初始化，定义事件
        var viewer = new xViewer("xBIM-viewer");
        // 定义样式
        viewer.background = [0, 205, 205]; //  [0, 0, 0];
        viewer.defineStyle(0, [255, 0, 0, 255]);  //red
        viewer.defineStyle(1, [0, 0, 255, 100]);  //semitransparent blue
        viewer.defineStyle(2, [255, 255, 255, 255]); //white
        // 定义事件
        viewer.on("error", function (arg) {
            var container = viewer._canvas.parentNode;
            if (container) {
                //preppend error report
                container.innerHTML = "<pre style='color:red;'>" + arg.message + "</pre>" + container.innerHTML;
            }
        });
        viewer.show("back");
        viewer.on("pick", function (args) {
            var id = args.id;
            $("#coords").html(id);
            var radios = document.getElementsByName("pickMode");
            for (var i in radios) {
                if (radios.hasOwnProperty(i)) {
                    var radio = radios[i];
                    if (radio.checked) {
                        var val = radio.value;
                        if (val === "select") {
                            apiGetEntityProperties(id);
                            setAllTypeState(xState.UNDEFINED);
                            viewer.setState(xState.HIGHLIGHTED, [id]);
                        }
                        if (val === "hideOne") {
                            viewer.setState(xState.HIDDEN, [id]);
                        }
                        if (val === "hideType") {
                            var type = viewer.getProductType(id);
                            viewer.setState(xState.HIDDEN, type);
                        }
                        if (val === "highlightOne") {
                            if (viewer.getState(id) != xState.HIGHLIGHTED) {
                                viewer.setState(xState.HIGHLIGHTED, [id]);
                            }
                            else {
                                viewer.setState(xState.UNDEFINED, [id]);
                            }
                        }
                        if (val === "highlightType") {
                            var type = viewer.getProductType(id);
                            if (viewer.getState(id) != xState.HIGHLIGHTED) {
                                viewer.setState(xState.HIGHLIGHTED, type);
                            }
                            else {
                                viewer.setState(xState.UNDEFINED, type);
                            }
                        }
                        if (val === "none") {
                            setAllTypeState(xState.UNDEFINED);
                        }
                        break;
                    }
                }
            }
            //viewer.zoomTo(id);
        });
        viewer.on("dblclick", function (arg) {
            console.log(arguments);
            openWindows(arg.id);
        });
        viewer.on("mouseDown", function (arg) {
            viewer.setCameraTarget(arg.id);
        });
        viewer.on("fps", function (fps) {
            var span = document.getElementById("fps");
            if (span) {
                span.innerHTML = fps;
            }
        });

        // 加载模型
        viewer.load(localData.CurPrjBimInfo.wexbim);
        viewer.start();
        viewer.zoomTo();

        // 加载插件： 导航，主页
        var cube = new xNavigationCube();
        viewer.addPlugin(cube);
        var home = new xNavigationHome();
        viewer.addPlugin(home);

        // 设置所有元素样式
        var setAllTypeStyle = function (style) {
            for (var i in xProductType) {
                if (xProductType[i] !== xProductType.IFCSPACE) {
                    viewer.setStyle(style, xProductType[i])
                }
            }
        }
        //  设置所有元素状态
        var setAllTypeState = function (state) {
            for (var i in xProductType) {
                if (xProductType[i] !== xProductType.IFCSPACE) {
                    viewer.setState(state, xProductType[i])
                }
            }
        }

    </script>
    <!--后台接口-->
    <script>
        // 获得楼层信息
        function apiGetAllStoreys() {
            console.log("获得楼层信息", "……");
            $.ajax({
                url: "/xBim/Ifc2x3/GetAllStoreys",
                type: "POST",
                data: {
                    wFileName:localData.CurPrjBimInfo.ifc,
                },
                success: function (ret) {
                    console.log("获得楼层信息", ret);
                    var data = new TreeHelper().ToTree2(ret);
                    console.log("获得楼层信息", data);
                    $('#trShardBldg').treeview({
                        data: data, onNodeSelected: function (ev, node) {
                            console.log(ev, node);
                            var ids = [];
                            node.LsWall.forEach(function (item) {
                                ids.push(parseInt(item.id));
                            });
                            //viewer.zoomTo(id);
                            setAllTypeState(xState.UNDEFINED);//取消所有样式
                            viewer.setState(xState.HIGHLIGHTED, ids);          //设置此楼层样式                 
                        }
                    });
                }
            });
        }
        // 获得领域信息
        //  BuildControl    建筑控制      FireProtect       消防管理
        //  StructureElem   结构构件      StructureAnaly    结构分析
        //  HVAC            暖通工程      Electrical        电气
        //  Architecture    建筑          ConsManager       施工管理
        function apiGetDomains(type) {
            console.log("获得领域信息", "……");
            $.ajax({
                url: "/xBim/Ifc2x3/GetDomains",
                type: "POST",
                data: {
                    wFileName: localData.CurPrjBimInfo.ifc,
                    type: type,
                },
                success: function (ret) {
                    console.log("获得领域信息", ret);
                    var data = new TreeHelper().ToTree2(ret);
                    // data.push({});
                    console.log("获得领域信息", data);
                    $('#trdomain_' + type).treeview({
                        data: data, onNodeSelected: function (ev, node) {
                            console.log(ev, node);
                            var id = parseInt(node.id);
                            viewer.zoomTo(id);
                            viewer.setState(xState.HIGHLIGHTED, [id]);
                            apiGetEntityProperties(id);
                        }
                    });
                }
            });
        }
        // 更新设备列表
        function updateGceMonitorDevice() {
            // console.log("更新已经绑定的设备列表", "……");
            var trTreeNodes = [];
            localData.deviteTypeInfo.forEach(function (item, index) {
                trTreeNodes.push({ pid: "", id: item.value, text: item.text, nodes: [], _NodeInfo: item });
            });
            localData.CurPrjBimInfo.lsIfcDevice.forEach(function (item, index) {
                trTreeNodes.push({ pid: item.DeviceType, id: item.IfcId, text: item.DeviceName, _NodeInfo: item });
            });
            var trTreeNodes2 = new TreeHelper().ToTree2(trTreeNodes);
            console.log("更新已经绑定的设备列表", trTreeNodes2);
            // 
            $('#trGceMonitorDevice').treeview({
                data: trTreeNodes2, onNodeSelected: function (ev, node) {
                    console.log(ev, node);
                    if (node.nodes) {

                    } else {
                        var id = parseInt(node.id);
                        viewer.zoomTo(id);
                        viewer.setState(xState.HIGHLIGHTED, [id]);
                       // apiGetEntityProperties(id);
                        openWindows(node.id);

                    }
                }
            });
        }
       
        // 获得实体属性
        function apiGetEntityProperties(id) {
            console.log("获得实体属性", "……");
            $.ajax({
                url: "/xBim/Ifc2x3/GetEntityProperties",
                type: "POST",
                data: {
                    wFileName: localData.CurPrjBimInfo.ifc,
                    id: id || 0,
                },
                success: function (ret) {
                    //console.log("获得实体属性", ret);
                    var html = formatEntityProperties(ret);
                   // console.log("获得实体属性", html);
                    $("#collapse1").children(":first-child").html(html);
                }
            });
        }
        function formatEntityProperties(datas) {
            var $html = '';
            datas.forEach(function (item) {
                $html += '<div>';
                $html += '<strong>' + item.Name + '</strong>';
                $html += '&ensp;：&ensp;';
                $html += '<span>' + item.Value + '</span>';
                $html += '</div>';
            });
            return $html;
        }
        function apiGetAllDeviceInfo() {
            console.log("获得此工程所有设备", "……");
            $.ajax({
                url: "/EM/DetectData/GetDeviceAll",
                type: "POST",
                data: {
                    F_ConsProjectID: localData.CurPrjId,
                },
                success: function (ret) {
                    console.log("获得此工程所有设备",JSON.stringify(ret));
                    localData.CurPrjBimInfo.lsDeviceInfo = ret;
                }
            });
        }
        // 打开弹窗
        function openWindows(ifcId) {
            if (ifcId == undefined || ifcId == "") {
                showMsg("未能获取实体ID");
                return;
            }
            var title = "";
            var content = null;
            var type = 1;
            var width = 500;
            var height = 300;
            if (localData.editMode == true) {
                // 编辑模式
                title = "设备绑定";
                type = 1;
                width = 600 + 'px';
                height = 400 + 'px';;
                content = $('#divBindDevice');
                initBindDeviceWin(ifcId);
            } else {
                // 查看模式
                title = "设备实时状态";
                type = 2;
                width = 800 + 'px';
                height = 600 + 'px';
                content = getWinUrl(ifcId);
                if (content == "") { return; }
            }
            // console.log(content)

            // 打开窗体
            var layer = layui.layer;
            layer.open({
                type: type
                , title: title 
                , content: content
                , area: [width , height]
                //, btn: ['确认', '取消']
                //, yes: function (index, layero) { } // 确认
                //, cancel: function () {  } //右上角关闭回调  return false 开启该代码可禁止点击该按钮关闭
                //, btn2: function (index, layero) { } // 取消
                //, end: function (index, layero) {  }// 层销毁后
            });

        }
        // 显示提示信息
        function showMsg(msg,title) {
            var layer = layui.layer;
            layer.open({
                type: 0
                , title: title || ""
                , content: msg
            });
        }
        // 获得弹窗URL
        var getWinUrl = function (ifcId) {
            //
            var deviceInfo = getDeviceByIfcId(ifcId);
            // deviceInfo=  localData.CurPrjBimInfo.ifcDevice[ifcId];
            if (deviceInfo == undefined || deviceInfo == null) {
                showMsg("此实体尚未绑定设备！");
                return "";
            }
            var pid = localData.CurPrjId;
            var projectName = "";
            var deviceId = deviceInfo.DeviceID;
            var deviceType = deviceInfo.DeviceType;
            var deviceName = deviceInfo.DeviceName;

            var url = "";
            if (deviceName.indexOf("车牌") != -1) {
                url = "MapCarDeviceView";
                title = "车牌监控";
            } else if (deviceName.indexOf("升降机") != -1) {
                url = "MapLiftDeviceView";
                title = "升降机安全监测";
            } else if (deviceType == "TEM_Device") {
                url = "MapDetectDataView";
                title = "环境监测信息";
                height = "50%";
            } else if (deviceType == "TRN_AttenDevice") {
                url = "MapAttenDeviceView";
                title = "实名制信息";
            } else if (deviceType == "TTC_TowerCrane") {
                url = "MapTowerCraneView";
                title = "塔机信息";
            } else if (deviceType == "TVM_MonitorDevice") {
                url = "RealWin";
                title = "设备名称:" + deviceName;
            } else {
                //__notice("非法设备类型");
                return;
            }
            if (deviceType == "TVM_MonitorDevice") {
                url = "/VM/VideoMonitor/" + url + "?pid=" + pid + "&mids=" + deviceId;
            } else {
                url = "/SM/Map/" + url + "?projectid={0}&&deviceId={1}&projectName={2}&deviceName={3}".format(pid, deviceId, encodeURI(projectName), encodeURI(deviceName));
            }
            return localData.Origin + url;
        }

        // 初始化绑定窗体
        function initBindDeviceWin(ifcId) {
            $("#formBindDevice input[name=IfcId]").val(ifcId);
            $tg$select.setOptions("#formBindDevice select[name=DeviceType]", localData.deviteTypeInfo);
            var deviceInfo = getDeviceByIfcId(ifcId);
            if (deviceInfo != null) {
                var deviceType = deviceInfo.DeviceType;
                var deivceId = deviceInfo.DeviceID;
                var options = getDeviceOptions(deviceType);
                $tg$select.setOptions("#formBindDevice select[name=DeviceID]", options);

                $tg$select.setValue("#formBindDevice select[name=DeviceType]", deviceType);
                $tg$select.setValue("#formBindDevice select[name=DeviceID]", deivceId);
            }
            else {
                var deviceType = localData.deviteTypeInfo[0].value;
                var options = getDeviceOptions(deviceType);
                $tg$select.setOptions("#formBindDevice select[name=DeviceID]", options);
            }
        }
        function funDeviceTypeChanged() {
            var deviceType = $tg$select.getValue("#formBindDevice select[name=DeviceType]");
            var options = getDeviceOptions(deviceType);
            $tg$select.setOptions("#formBindDevice select[name=DeviceID]", options);
        }
        // 保存绑定结果
        function saveBindDeviceWin() {
            var ifcid = $("#formBindDevice input[name=IfcId]").val();
            var deviceType = $tg$select.getValue("#formBindDevice select[name=DeviceType]");
            var deviceId = $tg$select.getValue("#formBindDevice select[name=DeviceID]");
            var deviceName = $tg$select.getText("#formBindDevice select[name=DeviceID]");

            setDeviceIfcId(ifcid, deviceType, deviceId, deviceName);

            updateGceMonitorDevice()

            var layer = layui.layer;
            layer.closeAll();
        }

        // 页面准备好
        $(function () {
            $(window).resize(function () {
                $("#bimContainer").width(window.innerWidth - 0);
                $("#bimContainer").height(window.innerHeight - 74);

                $("#bimProjectInfo").height(window.innerHeight - 100);
                $("#bimProperties").height(window.innerHeight - 250);
            });
            $(window).resize();

            apiGetAllDeviceInfo();

            apiGetAllStoreys();
            // apiGetDomains("BuildControl");// 建筑控制
            // apiGetDomains("FireProtect");//  消防管理
            // apiGetDomains("StructureElem");// 结构构件
            // apiGetDomains("StructureAnaly");//  结构分析
            // apiGetDomains("HVAC");//  暖通工程
            // apiGetDomains("Electrical");//  电气
            // apiGetDomains("Architecture");//  建筑
            //  apiGetDomains("ConsManager");//  施工管理

            updateGceMonitorDevice();
            viewer.zoomTo();
        });


    </script>
</body>



</html>